<!-- Created by henian.xu on 2018/11/11. -->

<template>
    <page class="container">
        <Panel>
            <div class="row">
                <div class="col-4 bor-r">
                    <XMenu
                        v-model="menuId"
                        :data="menuOption"
                        style="min-height: 500px;"
                        @clickItem="onMenuItem"/>
                </div>
                <div class="col-20">
                    <Breadcrumbs :data="breadcrumbsList"/>
                    <nuxt-child/>
                </div>
            </div>
        </Panel>
    </page>
</template>

<script>
export default {
    data() {
        return {
            menuOption: [],
            menuId: 0,
        };
    },
    computed: {
        catId() {
            return this.$route.params.catId;
        },
        articleId() {
            return this.$route.params.articleId;
        },
        menuOptionMap() {
            const flatten = arr =>
                arr.reduce((flat, next) => {
                    flat = flat.concat(next);
                    if (next.children) {
                        flat = flat.concat(flatten(next.children));
                    }
                    return flat;
                }, []);
            return flatten(this.menuOption).reduce((p, n) => ((p[n.id] = n), p), {});
        },
        breadcrumbsList() {
            const { catId, /*articleId,*/ menuOptionMap } = this;
            const currMenu = menuOptionMap[catId];
            if (!currMenu) return [];
            const idPath = currMenu.idPath.replace(/(^>*)|(>*$)/g, '').split('>');
            return idPath.map(key => menuOptionMap[key]);
        },
    },
    methods: {
        gotoFirst() {
            if (!this.menuOption.length) return;
            const menuItem = this.menuOption[0];
            if (this.$route.path === '/cms') {
                console.log(menuItem);
                if (menuItem.children && menuItem.children.length) {
                    this.menuId = menuItem.children[0].id;
                    this.onMenuItem(menuItem.children[0]);
                } else {
                    this.menuId = menuItem.id;
                    this.onMenuItem(menuItem);
                }
            } else {
                this.menuId = +this.$route.params.catId || 0;
            }
        },
        onMenuItem(item) {
            if (item.cmsCatalogType === 1) {
                // 普通栏目
                this.$router.push(`/cms/${item.id}`);
            } else if (item.cmsCatalogType === 2) {
                // TODO 标题栏目
                // this.$router.push(`/cms/article/${item.id}?isCat=1`);
            }
        },
    },
    mounted() {
        this.$axios.get('/rpc/buyer/pt/cms/findAllCmsCatalogList').then(json => {
            const res = json.data.data;
            this.menuOption = res;
            this.gotoFirst();
        });
        console.log(this.$router.options.routes);
    },
};
</script>

<style lang="scss">
</style>
